<template>
    <div class="security-section">
      <h3 class="section-title">账户安全</h3>
      
      <el-descriptions border>
        <el-descriptions-item label="登录密码">
          <span>已设置</span>
          <el-button type="text" @click="showPasswordDialog = true">修改</el-button>
        </el-descriptions-item>
        
        <el-descriptions-item label="手机绑定">
          <span>138****0000</span>
          <el-button type="text" @click="showPhoneDialog = true">更换</el-button>
        </el-descriptions-item>
        
        <el-descriptions-item label="邮箱绑定">
          <span>exa****@example.com</span>
          <el-button type="text" @click="showEmailDialog = true">更换</el-button>
        </el-descriptions-item>
        
        <el-descriptions-item label="实名认证">
          <el-tag type="danger" size="small">未认证</el-tag>
          <el-button type="text" @click="showAuthDialog = true">去认证</el-button>
        </el-descriptions-item>
      </el-descriptions>
  
      <!-- 修改密码对话框 -->
      <el-dialog v-model="showPasswordDialog" title="修改密码" width="400px">
        <el-form :model="passwordForm" label-width="100px">
          <el-form-item label="当前密码" required>
            <el-input v-model="passwordForm.currentPassword" type="password" />
          </el-form-item>
          <el-form-item label="新密码" required>
            <el-input v-model="passwordForm.newPassword" type="password" />
            <div class="password-hint">密码长度8-20位，需包含字母和数字</div>
          </el-form-item>
          <el-form-item label="确认密码" required>
            <el-input v-model="passwordForm.confirmPassword" type="password" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showPasswordDialog = false">取消</el-button>
          <el-button type="primary" @click="updatePassword">确认修改</el-button>
        </template>
      </el-dialog>
  
      <!-- 其他对话框可以类似实现 -->
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const showPasswordDialog = ref(false)
  const showPhoneDialog = ref(false)
  const showEmailDialog = ref(false)
  const showAuthDialog = ref(false)
  
  const passwordForm = ref({
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
  
  const updatePassword = () => {
    console.log('修改密码:', passwordForm.value)
    showPasswordDialog.value = false
    // 实际项目中这里应该验证密码并调用API
  }
  </script>
  
  <style scoped>
  .security-section {
    padding: 20px;
  }
  
  .section-title {
    margin: 0 0 20px;
    color: #333;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .password-hint {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }
  </style>